<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PlasmaWeb</title>
<link href='css/style.css' rel='stylesheet' type='text/css' />
<link href='css/skin.css' rel='stylesheet' type='text/css' />
<link href="css/jquery.qtip.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]><link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen" /><![endif]-->
<script type='text/javascript' src='js/jquery-1.4.3.min.js'></script>
<script type='text/javascript' src='js/jquery.tools.min.js'></script>
<script type='text/javascript' src='js/jquery.jcarousel.js'></script>
<script type='text/javascript' src='js/cufon-yui.js'></script>
<script type='text/javascript' src='css/VistaSan_500-VistaSan_700.font.js'></script>

<script type='text/javascript' src='js/jquery.qtip.pack.js'></script>
<link href="css/menuCategorias.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/menuCategorias.js"></script>
<script type='text/javascript'>
	Cufon.replace('#menuh');
	Cufon.replace('.contenido_resto .cont_contenido .texto font');
        Cufon.replace('.contenido_resto .cont_contenido .textCat');

</script>



</head>

<body> 
<div id="principal">
	<div id="top">
    	<div class="info">
        	<div class="info_der">Avenida 1-H No.133 local 6 x 12 y 14 C.P. 97128 Col. Fraccionamiento M&eacute;xico Norte, M&eacute;rida, Yucat&aacute;n.</div>
            <div class="info_izq">contacto@plasmastudio.com.mx | (999)948-30-16</div>
        </div>
        <div id="cont_menu">
            <div class="logo"><img id="imgLogo" src="imagenes/logo.png" /></div>
            <div id="menuh">
            	<ul id="men" class="group">
                    <li><a href="index.php" alt="home">INICIO</a></li>
                    <li><a href="galeria.php" alt="portafolio">GALERIA</a></li>
                    <li class="current_page_item"><a href="#" alt="promocionales">PROMOCIONALES</a></li>
                    <li><a href="servicios.php" alt="servicios">SERVICIOS</a></li>
                    <li><a href="contacto.php" alt="contacto">CONTACTO</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="contenido_resto promocionales">
    	<div class="cont_contenido">
        	<div class="texto">
            	<font style="font-size:24pt; font-weight: bold;">&lt; Promocionales </font><br /><br />
                <br />
                <br /><br />
            </div>
        	<div class="submenu_promo" >
            	<ul id="submenu">
                <div class="accordion">
                <li>&nbsp;</li>
                <?php
                    include('js/funcion.inc');
                    conecta();
                    $sql_super = "SELECT * FROM super_categoria ORDER BY NOMBRE ASC";
                    $res_super=mysql_query($sql_super);
                    while($row_super=mysql_fetch_array($res_super)){
                        $sql_cat_rel = "SELECT * FROM relacion_categorias WHERE id_super = ".$row_super[0];
                        $resultado = mysql_query($sql_cat_rel);
                        if(mysql_num_rows($resultado) != 0){
                            echo "<h3 class='".$row_super[0]." textCat'>".utf8_encode($row_super[1])."</h3>";
                            echo "<div>";
                            while($row_rel=mysql_fetch_array($resultado)){
                                  $sql_sub = "SELECT * FROM categorias WHERE id=".$row_rel[1];
                                  $categoria = mysql_query($sql_sub);
                                  while($row=mysql_fetch_array($categoria)){
                                     echo '<li><a href="listas.php?funcion=1&cat='.$row[1].'" alt="'.$row[1].'">'.utf8_encode($row[2]).'</a></li>';                                    
                                  }
                            }
                            echo "</div>";
                        }
                        
                        else{
                              //echo "<h3>".utf8_encode($row_super[1])."</h3>";                            
                        }
                        //echo '<a href="listas.php?funcion=1&cat='.$row_rel[1].'" alt="'.$row_rel[1].'">'.utf8_encode($row_rel[1]).'</a>';
                    }
                        mysql_free_result($res_super);
                ?>
                    </div>
                </ul>
            </div>
            <div class="scrollable_vertical">
                <ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
               		<li></li>
				</ul>
			</div>
            <div class="info_scrollable">
            	<div class="img">
                	<img src="imagenes/promocionales/grandes/promo1.jpg" width="510"/>
                </div>
                <div class="desc_scrollable">
                    <div class="info1">
                    	<font class="titulo">Memoria USB Opel</font><br />
                        BEL-BLE0001-1<br /><br />
                        Descripcion: SHALALALALALALLALA. Material: Plastico. <br />
                        Medidas: 7.5 x 2.2 x 1.1.
                        Colores: Azul, blanco, verde.
                    </div>
                    <div class="info2">
                    </div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="info">
            <div id="bottom">PLASMA Taller Gr&aacute;fico | Dise&ntilde;o Gr&aacute;fico y Publicitario | Art&iacute;culos Promocionales | Publicidad | Producci&oacute;n | Corte y Grabado L&aacute;ser | Impresos | Campa&ntilde;as | Branding | Medios | Multimedia
		</div>
    </div>
    <div class="clear"></div>
</div>
<div class="clear"></div>
</body>
<script type="text/javascript">
$(document).ready(function() {
	Cat = $(this);
        var $el, leftPos, newWidth, $mainNav = $("#men");

    $mainNav.append("<li id='magic-line'></li>");
    
    var $magicLine = $("#magic-line");
    
    $magicLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").position().left+66)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());
        
    $("#men li").find("a").hover(function() {
        $el = $(this);
		leftPos=$el.position().left+(($el.parent().width()-34)/2);
        newWidth = $el.parent().width();
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
		$(".current_page_item").removeClass('current_page_item');
		$el.parent().addClass('current_page_item');
		Cufon.refresh();
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });    
    });
	
	$('#mycarousel').jcarousel({ vertical: true	});
	
	$('#submenu li a').click(function(){
		Cat = $(this).attr('alt');
		$('.jcarousel-skin-tango').remove();
		$('.scrollable_vertical').append("<ul id='mycarousel' class='jcarousel-skin-tango'> </ul>");
		$('#mycarousel').jcarousel({
			vertical: true,
			scroll: 5,
			visible: 5,
			initCallback: mycarousel_initCallback
		});
		return false;
	});
});

function binDClick() {
	$('.jcarousel-skin-tango a').click(function(){
		var Prod = $(this).attr('href');
		$('.info_scrollable').fadeOut('fast',function() {
    		$('.info_scrollable').load(Prod, function(response, status, xhr) {
  				if (status == "success") {
					$('.info_scrollable').fadeIn('slow');
					/*$('.info2 img').each(function(i){
						var title=$(this).attr('title');
						$(this).tooltip({ offset: [10, 2], effect: 'slide' });
					});*/
					//$('.info2 img[title]').tooltip({ offset: [10, 2], effect: 'slide' });
					$('img[title]').qtip({
							position: {
								my: 'bottom center',  //donde esta la flecha del tooltip
								at: 'top center' // a donde apunta el tooltip
								 // my target
							},
							style: {
								classes: 'ui-tooltip-dark'
							}
					});
				}
			});
		});
		return false;
	});
}
function mycarousel_initCallback(carousel, state){
    jQuery.get('listas.php', {'funcion': '1', 'cat': Cat, first: carousel.first, last: carousel.last, newest: new Date().getTime() }, function(xml) { 
		mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, xml); 
	}, 'xml' );
};
function mycarousel_itemAddCallback(carousel, first, last, xml){
    // Set the size of the carousel
    carousel.size(parseInt(jQuery('total', xml).text()));
    jQuery('image', xml).each(function(i) {
        carousel.add(first + i, mycarousel_getItemHTML(jQuery(this).find('scr').text(),jQuery(this).find('prod').text()));
    });
	binDClick()
	carousel.setup();
};
function mycarousel_getItemHTML(url,prod){
    return '<a href="listas.php?funcion=2&id_prod='+ prod +'"><img src="imagenes/promocionales/thumb1/' + url + '" width="142" height="96" /></a>';
	//return '<img src="imagenes/promocionales/thumb/' + url + '" width="142" height="96" />';
};
</script>
</html>